import React, { ReactNode } from "react";
import classNames from "classnames";
import './style.less';

export interface CardOptions {
    bodyStyle?: React.CSSProperties; // 内容区域自定义样式
    bordered?: boolean; // 是否有边框
    cover?: string; // 卡片封面
    extra?: ReactNode; // 卡片右上角的操作区域
    headStyle?: React.CSSProperties; // 自定义标题区域样式
    hoverable?: boolean; // 鼠标移过时可浮起
    loading?: boolean; // 当卡片内容还在加载中时，可以用 loading 展示一个占位 
    size?: 'default' | 'small'; // card 的尺寸
    title?: React.ReactNode; // 卡片标题
    style?: React.CSSProperties;
}

export default class Card extends React.Component<CardOptions, any> {
    static defaultProps = {
        bordered: true,
        hoverable: false,
        loading: false,
        size: 'default'
    }
    constructor(props: CardOptions) {
        super(props);
        this.state = {};
    }
    render() {
        const {
            bodyStyle, bordered, extra, headStyle, hoverable, size, title, style, cover
        } = this.props;
        const cardClass = classNames({
            'r-card': true,
            'r-card-bordered': bordered,
            'r-card-hoverable': hoverable,
            [`r-card-${size}`]: size
        })
        return (
            <div className={cardClass} style={style}>
                {cover &&
                    <div className="r-card-head-cover">
                        <img width="100%" src={cover} alt="" />
                    </div>
                }
                {(title || extra || headStyle) &&
                    <div className="r-card-head" style={headStyle}>
                        <div className="r-card-head-wrapper">
                            {title &&
                                <div className="r-card-head-title">
                                    {title}
                                </div>
                            }
                            {extra &&
                                <div className="r-card-head-extra">
                                    {extra}
                                </div>
                            }
                        </div>
                    </div>
                }
                <div className="r-card-body" style={bodyStyle}>
                    {this.props.children}
                </div>
            </div>
        )
    }
}